<template>
  <div class="home-wrap">
    <div class="home-main-top">
      <section class="home-row-left">
        <HkPlayer height="100%" />
      </section>
      <section class="home-row-center">
        <ChartsTemperature height="100%" :data="thermalTemperatureData" />
      </section>
      <section class="home-row-right">
        <CardLarge :show-head="false" height="100%">
          <ChartsParticle
            height="50%"
            title="尘埃粒子（屏蔽车间）"
            ws-id="1"
            :data="dustParticle1Data" />
          <ChartsParticle
            height="50%"
            title="尘埃粒子（绝缘车间）"
            ws-id="2"
            :data="dustParticle2Data" />
        </CardLarge>
      </section>
    </div>
    <ChartsBottom :data="temperatureHumidityData" />
  </div>
</template>
<script setup>
  import HkPlayer from './HkPlayer.vue';
  import ChartsTemperature from './ChartsTemperature.vue';
  import ChartsParticle from './ChartsParticle.vue';
  import ChartsBottom from './ChartsBottom.vue';
  import { useWebSocket } from '@vueuse/core';
  // 摄像机红外温度
  const thermalTemperatureData = ref([]);
  // 尘埃粒子（屏蔽车间）
  const dustParticle1Data = ref([]);
  // 尘埃粒子（绝缘车间）
  const dustParticle2Data = ref([]);
  // 温/湿度
  const temperatureHumidityData = ref([]);

  const onMessage = (ws, e) => {
    const data = JSON.parse(e.data);
    if (data.topic === 'thermalTemperature') {
      thermalTemperatureData.value = [...data.message];
    }
    if (data.topic === 'dustParticle1') {
      dustParticle1Data.value = [...data.message];
    }
    if (data.topic === 'dustParticle2') {
      dustParticle2Data.value = [...data.message];
    }
    if (data.topic === 'temperatureHumidity') {
      temperatureHumidityData.value = [...data.message];
    }
  };
  const onConnected = (ws) => {
    console.log('WebSocket连接成功');
  };
  const onError = (ws, e) => {
    ElMessage({
      message: `WebSocket连接失败`,
      type: 'error',
    });
  };
  const { close } = useWebSocket(
    `${import.meta.env.VITE_APP_BASE_WS}/DataScreen/lulanSocket`,
    {
      onConnected,
      onError,
      onMessage,
      autoReconnect: {
        retries: 10,
        delay: 1000,
        onFailed() {
          ElMessage({
            message: 'Failed to connect WebSocket after 10 retries',
            type: 'error',
          });
        },
      },
      heartbeat: {
        message: 'ping',
        interval: 30 * 1000, //30s
        pongTimeout: 1000,
      },
    }
  );

  onUnmounted(() => {
    close();
  });
</script>
<style lang="scss" scoped>
  .home-wrap {
    height: 100%;
  }
  .home-main-top {
    display: flex;
    gap: vw(12);
    height: 64%;
    .home-row-left {
      flex: 1;
      min-width: 0;
    }
    .home-row-center {
      width: vw(580);
    }
    .home-row-right {
      width: vw(420);
    }
  }
</style>
